<div class="selection">
  <span>Selection：</span>
  <ng-container *ngIf="!selection?.length">none</ng-container>
  <ng-container *ngFor="let item of selection">
    <span>{{ item.label }}</span>
  </ng-container>
  <a *ngIf="selection?.length" (click)="clearSelection()">Clear</a>
</div>

<div class="tree-container">
  <lv-tree
    #tree
    class="ui-customer-tree"
    [lvData]="data"
    [lvShowExpandedIcon]="{ expandIcon: 'lv-icon-arrow-down', collapseIcon: 'lv-icon-arrow-right' }"
    lvShowCheckbox
    lvSelectedByCheckbox
    lvSelectionMode="multiple"
    [(lvSelection)]="selection"
    [lvNodeTemplate]="nodeTpl"
    (lvSelectionChange)="selectionChange($event)"
    (lvExpandedChange)="expandedChange($event)"
    (lvCheck)="check($event)"
    (lvSelect)="select($event)"
    (lvClick)="nodeClick($event)"
  ></lv-tree>
</div>

<ng-template #nodeTpl let-item>
  <div class="ui-tree-node-item" [class.ui-tree-node-item-checked]="item.checked">
    <span lv-overflow>{{ item.label }}</span>
  </div>
</ng-template>
